import React, { useState, useRef, useEffect } from 'react';
import { SvgIcon } from '@/components/icon';
import { CircleLoading } from '@/components/loading';
import { ZoomInOutlined, ZoomOutOutlined, UndoOutlined } from '@ant-design/icons';

interface ImagePreviewerProps {
  imageUrl: string;
  minScale?: number;
  maxScale?: number;
  containerStyle?: React.CSSProperties;
}

const ImagePreviewer: React.FC<ImagePreviewerProps> = ({
  imageUrl,
  minScale = 0.5,
  maxScale = 3,
  containerStyle = { width: '100%', height: '100%' },
}) => {
  // 状态管理
  const [scale, setScale] = useState(1);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isLoading, setIsLoading] = useState(true);
  const [isDragging, setIsDragging] = useState(false);
  const [startPos, setStartPos] = useState({ x: 0, y: 0 });

  // DOM引用
  const imgRef = useRef<HTMLImageElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // 图片加载完成处理
  const handleImageLoad = () => {
    setIsLoading(false);
  };

  // 缩放控制函数
  const handleScale = (delta: number) => {
    const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
    setScale(newScale);
  };

  // 重置图片位置和缩放
  const resetImage = () => {
    setScale(1);
    setPosition({ x: 0, y: 0 });
  };

  // 拖拽事件处理
  const handleMouseDown = (e: React.MouseEvent) => {
    if (e.button !== 0) return; // 仅响应左键
    setIsDragging(true);
    setStartPos({
      x: e.clientX - position.x,
      y: e.clientY - position.y,
    });
    containerRef.current?.classList.add('cursor-grabbing');
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging) return;
    setPosition({
      x: e.clientX - startPos.x,
      y: e.clientY - startPos.y,
    });
  };

  const handleMouseUp = () => {
    setIsDragging(false);
    containerRef.current?.classList.remove('cursor-grabbing');
  };

  return (
    <div
      ref={containerRef}
      style={containerStyle}
      className="relative flex items-center justify-center border border-gray-200 rounded-lg overflow-hidden bg-white"
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
    >
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-white/80 z-10">
          <CircleLoading />
        </div>
      )}

      <img
        ref={imgRef}
        src={imageUrl}
        alt="预览图片"
        onLoad={handleImageLoad}
        onDragStart={(e) => e.preventDefault()}
        style={{
          transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
          transition: isDragging ? 'none' : 'transform 0.1s ease',
          maxWidth: 'none',
          cursor: isDragging ? 'grabbing' : 'grab',
          opacity: isLoading ? 0 : 1,
        }}
        className="select-none"
      />

      <div className="absolute bottom-5 left-5 flex items-center gap-1 px-4 py-2 z-10">
        <button
          className="w-[30px] h-[30px] rounded flex items-center justify-center text-[rgba(39, 38, 54, 0.8)] hover:bg-white/30 disabled:bg-white/10 disabled:cursor-not-allowed transition-colors"
          onClick={() => handleScale(-0.1)}
          disabled={scale <= minScale}
          title="缩小"
        >
          <SvgIcon icon="minus" size={30} />
        </button>

        <span className="text-[rgba(39, 38, 54, 0.8)] text-base w-[56px] text-center">
          {Math.round(scale * 100)}%
        </span>

        <button
          className="w-[30px] h-[30px] rounded flex items-center justify-center text-[rgba(39, 38, 54, 0.8)] hover:bg-white/30 disabled:bg-white/10 disabled:cursor-not-allowed transition-colors"
          onClick={() => handleScale(0.1)}
          disabled={scale >= maxScale}
          title="放大"
        >
          <SvgIcon icon="plus" size={30} />
        </button>

        {/* <button
          className="w-10 h-10 rounded flex items-center justify-center bg-white/20 text-white hover:bg-white/30 transition-colors"
          onClick={resetImage}
          title="重置"
        >
          <UndoOutlined className="text-white" />
        </button> */}
      </div>
    </div>
  );
};

export default ImagePreviewer;